<template>
  <div class="communication-reg-index">
    <form class="am-form tpl-form-border-form tpl-form-border-br" data-am-validator :id="id">
        <div class="am-u-md-12 one-line">
          <div class="am-form-group am-u-lg-4 ex-left">
            <label class="am-u-sm-4 am-form-label ex-lable">
              <span class="am-text-danger am-margin-left-xs am-text-xs"></span>沟通形式：
            </label>
            <div class="am-u-sm-6 am-u-end input-field">
              <select2 required v-model="formData.way">
                <option value="">请选择</option>
                <!-- <option value="0">电话拨入</option>
                <option value="1">电话拨出</option> -->
                <option value="5">电话</option>
                <option value="2">面谈</option>
                <option value="3">微信/QQ</option>
                <option value="4">其他</option>
              </select2>
            </div>
          </div>
          <div class="am-form-group am-u-lg-4">
            <label class="am-u-sm-4 am-form-label">
              <span class="am-text-danger am-margin-right-xs am-text-xs"></span>续读意愿：
            </label>
            <div class="am-u-sm-6 am-u-end input-field">
              <select2 required v-model="formData.continueRead">
                <option value="">请选择</option>
                <!-- <option value="0">强烈</option>
                <option value="1">一般</option>
                <option value="2">无意愿</option> -->
                 <option value="3">确定续报</option>
                 <option value="4">考虑中</option>
                 <option value="5">不续报</option>
              </select2>
            </div>
          </div>
          <div class="am-form-group am-u-lg-4">
            <label class="am-u-sm-5 am-form-label">
              <span class="am-text-danger am-margin-right-xs am-text-xs"></span>是否需要老师重点关注:
            </label>
            <div class="am-u-sm-6 am-u-end input-field">
              <select2 required v-model="formData.focusOn">
                <option value="">请选择</option>
                <option value="1">是</option>
                <option value="0">否</option>
              </select2>
            </div>
          </div>
        </div>
        <div class="am-u-md-12 one-line">
          <div class="am-form-group am-u-lg-4 ex-left">
            <label class="am-u-sm-4 am-form-label ex-lable">
              <span class="am-text-danger am-margin-left-xs am-text-xs"></span>沟通日期：
            </label>
            <div class="am-u-sm-6 am-u-end input-field">
              <date-picker v-model="formData.communicateDate" >
                <input type="text" class="am-form-field" placeholder="请选择沟通日期" data-am-datepicker >
              </date-picker>
            </div>
          </div>
          <div class="am-form-group am-u-lg-4 am-u-end">
            <label class="am-u-sm-4 am-form-label">
              <span class="am-text-danger am-margin-right-xs am-text-xs"></span>下次沟通日期：
            </label>
            <div class="am-u-sm-6 am-u-end input-field">
              <date-picker v-model="formData.nextCommunicateDate" >
                <input type="text" class="am-form-field" placeholder="请选择日期" data-am-datepicker >
              </date-picker>
            </div>
          </div>
        </div>

        <div class="am-form-group ">
          <CommunicationTable :edit="true" ref="communicationTable"></CommunicationTable>
        </div>
        <div class="am-form-group ex-textarea ">
          <label class="am-u-sm-4 am-form-label ex-lable">
            <span class="am-text-danger am-margin-left-xs am-text-xs">*</span>沟通内容：
          </label>
          <div class="am-u-sm-10 textarea input-field">
            <textarea v-model="formData.communicateContent" types="textarea" required rows="3" maxlength="500" placeholder="500字以内"></textarea>
          </div>
        </div>

        <div class="am-form-group">
          <div class="am-u-sm-9 am-u-sm-push-3">
            <button type="submit" class="am-btn am-btn-primary">提交</button>
          </div>
        </div>
    </form>
  </div>
</template>
<script>
  import io from '../../lib/io'
  import moment from 'moment'
  import CommunicationTable from './CommunicationTable'
  export default{
    data(){
      return{
        formData:{
          studentCommunicateId: this.$route.query.studentCommunicateId,
          way: '5',
          continueRead: '3',
          focusOn: '0',
          communicateDate: moment().format('YYYY-MM-DD'),
          nextCommunicateDate: '',
          communicateContent: '',
        },
        tableData:[],
      }
    },
    components:{
      CommunicationTable
    },
    mounted(){
      var _this = this ;

      $('#' + this.id ).validator({
        validate:function(validity){

        },
        onValid: function(validity) {
          $(validity.field).closest('.input-field').find('.am-alert').hide();
        },
        onInValid: function(validity) {
          var $field = $(validity.field);
          var $group = $field.closest('.input-field');
          var $alert = $group.find('.am-alert');
          // 使用自定义的提示信息 或 插件内置的提示信息
          var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

          if (!$alert.length) {
            $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
            appendTo($group);
          }

          $alert.html('请填写（选择）此项').show();
          if(validity.field.getAttribute('types') === 'textarea'){
            $alert.html('请输入沟通内容').show();
          }
        },
        submit:function(e){
          e.preventDefault();
          let $submitBtn = $('button[type=submit]',e.target);
          $submitBtn.attr("disabled" ,"disabled" )
          _this.$showLoading()
          let formValidity = this.isFormValid();
          let complete = function(){
            _this.$hiddenLoading()
            $submitBtn.removeAttr("disabled" ,"disabled" )
          }
          if(formValidity){
            _this.save(complete);
          }else{
            complete.call()
          }
        }
      });

    },
    methods: {
      // submitFunc(){
      // 	document.querySelector("textarea").focus();
      // },
      save(complete){
        let tableData = this.getTableData();
        Object.assign(this.formData,tableData);
        io.post(io.communicationSave, this.formData ,
          (ret) => {
            complete.call()
            if (ret.success) {
              // document.querySelector("textarea").blur();
              // this.updataInput();
              this.$root.$emit('updataHistory');
              this.$toast('登记成功！');
              this.$router.go(-1)
              // this.$router.push('/main/school/communication/')

            }
          },
          () => {
            complete.call()
            this.$alert('请求服务器失败')
          }
        )
      },
      getTableData(){
        let cTableDate = this.$refs.communicationTable.tableData;
        let tableDatas = [];
        for(let i = 0 ; i < cTableDate.length ; i ++){
          let tableDataItem = {
            classId: cTableDate[i].classId,
            className: cTableDate[i].className,
            teacherId: cTableDate[i].teacherId,
            teacherName: cTableDate[i].teacherName,
            score: cTableDate[i].score,
            haveHarvest: cTableDate[i].haveHarvest,
            otherRequire: cTableDate[i].otherRequire,
            startAmount: cTableDate[i].startAmount,
            endAmount: cTableDate[i].endAmount,
          }
          tableDatas.push(tableDataItem);
        }
        return {regRecord: JSON.stringify(tableDatas) };
      },
      // 刷新
      updataInput(){
        this.formData = {
          studentCommunicateId: this.$route.query.studentCommunicateId,
          way: '5',
          continueRead: '3',
          focusOn: '0',
          communicateDate: moment().format('YYYY-MM-DD'),
          nextCommunicateDate: '',
          communicateContent: '',
        };

        for(let i = 0 ; i < this.$refs.communicationTable.tableData.length ; i ++){
          this.$refs.communicationTable.tableData[i].score = '';
          this.$refs.communicationTable.tableData[i].haveHarvest = '1';
          this.$refs.communicationTable.tableData[i].otherRequire = '';
        }
      }
    }
  }
</script>
<style scoped lang="less">
  .ex-lable{
    width: auto!important;
  }
  .textarea{
    width: 88.89%!important;
    float: left!important;
  }
  .ex-left{
    padding-left: 0;
    font-size: 0;
    position: relative;
    left: -6px;
    .ex-lable{
      padding-left: 0;
    }
  }
  .ex-textarea{
    display: flex;
    .textarea{
      flex: 1;
    }
    .ex-lable{
      margin-left: -6px;
      margin-right: -5px;
    }
  }
</style>
